@import "list.css";

.card {
    display: grid;
    grid-area: main;
    grid-auto-rows: minmax(5rem, auto);
    grid-template-areas: "head" "body" "foot";
}

.card--project {
    max-width: 400px;
    text-align: center;
    align-items: center;
    grid-template-areas: "head" "body";
    padding: 2rem;
    margin: 0 auto;
}

.card .card-header {
    grid-area: head;
    margin: 0 auto;
}

.card .card-body {
    grid-area: body;
}

.card .card-footer {
    grid-area: foot;
}

.card--team {
    grid-area: unset;
}

.card--team .card-body {
    margin: 0 auto;
}

.card--team .member-picture {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-size: cover;
    position: relative;
    box-shadow: 0 0 0 10px #f8f8f8;
    border-radius: 100%;
    border-bottom: 2px solid #ddd;
}

.card--team .member-name {
    font-weight: 600;
}

.card--team .member-social {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

.card--blog-list .card--body {
    display: grid;
    grid-template-columns: repeat(1, minmax(130px, 1fr));
    align-items: center;
    grid-gap: 2rem;
    font-size: 16pt;
    zoom: 0.7;
    font-family: RedHatText, "Red Hat Text", Overpass, Overpass, "Helvetica Neue", Arial, sans-serif;
}

.card--blog-list .card-header a {
    color: #475058;
    text-decoration: none;
}

@media (min-width: 950px) {
  .card--blog-list .card--body {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

@media (min-width: 1250px) {
  .card--blog-list .card--body {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

@media (min-width: 2000px) {
  .card--blog-list .card--body {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }
}
